<%-- 
    Document   : about-styled
    Created on : 24/07/2013, 15:23:28
    Author     : Jean Carlo
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>SIMPLE</title>


        <!-- CSS -->
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
        <!--[if IE 6]>
                <link rel="stylesheet" type="text/css" media="screen" href="css/ie-hacks.css" />
                <script type="text/javascript" src="js/DD_belatedPNG.js"></script>
                <script>
                /* EXAMPLE */
                DD_belatedPNG.fix('*');
        </script>
        <![endif]-->
        <!--[if IE 7]>
                <link rel="stylesheet" href="css/ie7-hacks.css" type="text/css" media="screen" />
        <![endif]-->
        <!--[if IE 8]>
                <link rel="stylesheet" href="css/ie8-hacks.css" type="text/css" media="screen" />
        <![endif]-->
        <!-- ENDS CSS -->

        <!-- prettyPhoto -->
        <link rel="stylesheet" href="js/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen" />
        <!-- ENDS prettyPhoto -->

        <!-- JS -->
        <script type="text/javascript" src="js/jquery_1.4.2.js"></script>
        <script type="text/javascript" src="js/jqueryui.js"></script>
        <script type="text/javascript" src="js/easing.js"></script>
        <script type="text/javascript" src="js/jquery.cycle.all.js"></script>
        <script type="text/javascript" src="js/tooltip/jquery.tools.min.js"></script>
        <script type="text/javascript" src="js/filterable.pack.js"></script>
        <script type="text/javascript" src="js/prettyPhoto/js/jquery.prettyPhoto.js"></script>
        <script type="text/javascript" src="js/chirp.js"></script>
        <script type="text/javascript" src="js/jquery.tabs/jquery.tabs.pack.js"></script>
        <script type="text/javascript" src="js/custom.js"></script>
        <!-- ENDS JS -->

        <!-- Cufon -->
        <script src="js/cufon-yui.js" type="text/javascript"></script>
        <script src="js/fonts/bebas-neue_400.font.js" type="text/javascript"></script>
        <!-- /Cufon -->

        <!-- superfish -->
        <link rel="stylesheet" type="text/css" media="screen" href="css/superfish-custom.css" /> 
        <script type="text/javascript" src="js/superfish-1.4.8/js/hoverIntent.js"></script> 
        <script type="text/javascript" src="js/superfish-1.4.8/js/superfish.js"></script> 
        <!-- ENDS superfish -->

        <!-- tabs -->
        <link rel="stylesheet" href="css/jquery.tabs.css" type="text/css" media="print, projection, screen" />
        <!-- Additional IE/Win specific style sheet (Conditional Comments) -->
        <!--[if lte IE 7]>
        <link rel="stylesheet" href="css/jquery.tabs-ie.css" type="text/css" media="projection, screen">
        <![endif]-->
        <!-- ENDS tabs -->

    </head>


    <body>

        <!-- HEADER -->
        <div id="header">
            <div class="degree">
                <div class="wrapper">
                    <a href="index.jsp"><img src="img/logo.png" alt="Logo" id="logo" /></a>

                    <!-- search -->
                    <div class="top-search">
                        <form  method="get" id="searchform" action="">
                            <div>
                                <input type="text" value="Search..." name="s" id="s" onfocus="defaultInput(this)" onblur="clearInput(this)" />
                                <input type="submit" id="searchsubmit" value=" " />
                            </div>
                        </form>
                    </div>
                    <!-- ENDS search -->

                    <!-- navigation -->
                    <div id="nav-holder">
                        <ul id="nav" class="sf-menu">
                            <li><a href="index.jsp">HOME</a>
                                <ul>
                                    <li><a href="index-3d.jsp">3D SLIDESHOW</a></li>
                                </ul>
                            </li>
                            <li class="current_page_item"><a href="about.html">FEATURES</a>
                                <ul>
                                    <li><a href="about.jsp">LAYOUT</a></li>
                                    <li><a href="about-styled.jsp">STYLED</a></li>
                                    <li><a href="about-more.jsp">MORE</a></li>
                                    <li><a href="about-toggle.jsp">TOGGLE BOX</a></li>
                                    <li><a href="about-accordion.jsp">ACCORDION</a></li>
                                    <li><a href="appearance.jsp">APPEARANCE</a></li>
                                </ul>
                            </li>
                            <li><a href="portfolio.jsp">PORTFOLIO</a></li>
                            <li><a href="gallery.jsp">GALLERY</a>
                                <ul>
                                    <li><a href="gallery.jsp">FOUR COLS</a></li>
                                    <li><a href="gallery-3.jsp">THREE COLS</a></li>
                                    <li><a href="gallery-2.jsp">TWO COLS</a></li>
                                </ul>
                            </li>
                            <li ><a href="blog.jsp">BLOG</a></li>
                            <li><a href="contact.jsp">CONTACT</a></li>
                            <li><a href="staff.jsp">STAFF</a></li>
                            <li><a href="http://luiszuno.com/blog/downloads/simple-template ">DOWNLOAD</a></li>

                        </ul>
                    </div>
                    <!-- ENDS navigation -->

                </div>
                <!-- ENDS HEADER-wrapper -->
            </div>
        </div>
        <!-- ENDS HEADER -->

        <!-- MAIN -->
        <div id="main">
            <!-- wrapper -->
            <div class="wrapper">
                <!-- content -->
                <div class="content">
                    <!-- title -->
                    <div class="title-holder">
                        <span class="title">FEATURES</span>
                        <span class="subtitle">Pellentesque habitant morbi tristique senectus et netus et malesuada fames .</span>
                    </div>
                    <!-- ENDS title -->


                    <!-- page-content -->
                    <div class="page-content">

                        <!-- left -->
                        <div class="one-half">
                            <h1 class="custom">HEADER 1</h1>
                            <p>Lacus enim ac eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
                            <h2 class="custom">HEADER 2</h2>
                            <p>Lacus enim ac eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
                            <h3 class="custom">HEADER 3</h3>
                            <p>Lacus enim ac eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
                            <h4 class="custom">HEADER 4</h4>
                            <p>Lacus enim ac eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
                            <h5 class="custom">HEADER 5</h5>
                            <p>Lacus enim ac eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
                            <h6 class="custom">HEADER 6</h6>
                            <p>Lacus enim ac eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
                            <!-- ENDS headers -->
                            <!-- Text -->
                            <h4>PULL QUOTES</h4>
                            <p>Lacus enim ac eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.<span class="pullquote-left">THIS IS A PULL QUOTE LEFT, LOREM IPSUM DOLOR AMET</span>Lacus enim ac eros enim ac eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.Lacus enim ac eros enim ac eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.Lacus enim ac eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>	
                            <p>Lacus enim ac eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.<span class="pullquote-right">THIS IS A PULL QUOTE RIGHT, LOREM IPSUM DOLOR AMET</span>Lacus enim ac eros enim ac eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.Lacus enim ac eros enim ac eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.Lacus enim ac eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis tincidunt quis, tincidunt quis,luctus, metus.</p>						
                            <!-- ENDS text -->
                            <!-- text 2 -->
                            <h4>DROPCAP AND HIGHLIGHT</h4>
                            <p><span class="dropcap">L</span>acus enim ac eros eu erat. <span class="highlight">Highlighted text</span> Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.Lacus enim ac eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, nt quis, accumsan porttitor, facilisis luctus, metus.Lacus eni quis,tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>	
                            <!-- ENDS text 2 -->
                        </div>
                        <!-- ENDS left -->	


                        <!-- right -->
                        <div class="one-half last">
                            <!-- images -->
                            <h4>IMAGE ALIGNMENT</h4>
                            <p><img src="img/dummies/dummy-img.jpg" class="left-align boxed" alt="img"/>Lacus enim ac eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.Lacus enim ac eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis,unt quis, tincidunt quis, nt quis, accumsan porttitor, facilisis luctus, metus.Lacus eni quis,tincidunt quis, accumsan porttitor, facilisis metus.</p>	
                            <p><img src="img/dummies/dummy-img.jpg" class="right-align boxed" alt="img" />Lacus enim ac eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.Lacus enim ac eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, vcidunt quis, accumsan porttitor, facilisit volutpat. Nam dui mi, tincidunt porttitor, facilisis luctus, Aliq Aliquam  facilisis luctus, metus.</p>						
                            <!-- ENDS images -->
                            <!-- info link buttons -->
                            <h4>BUTTONS</h4>
                            <p><a href="#" class="link-button"><span>LINK BUTTON</span></a></p>
                            <br/>
                            <p><a href="#" class="link-button"><span>LINK CAN HAVE ANY AMOUNT OF CONTENT TEXT</span></a></p>
                            <br/>
                            <!-- ENDS link buttons -->
                            <!-- info boxes -->
                            <h4>INFO BOXES</h4>
                            <p class="info">Info Box</p>					
                            <p class="success">Success Box</p>
                            <p class="error">Error Box</p>
                            <p class="warning">Warning Box</p>
                            <!-- ENDS info boxes -->
                            <!-- table -->
                            <h4>TABLES</h4>
                            <table cellspacing="0" cellpadding="0" border="0">				
                                <tbody>
                                    <tr>
                                        <th>Header</th>
                                        <th>Header</th>
                                        <th>Header</th>
                                        <th>Header</th>
                                    </tr>
                                    <tr>
                                        <td>Lorem ipsum</td>
                                        <td>Lorem ipsum</td>
                                        <td>Lorem ipsum</td>
                                        <td>Lorem ipsum</td>
                                    </tr>
                                    <tr>
                                        <td>Lorem ipsum</td>
                                        <td>Lorem ipsum</td>
                                        <td>Lorem ipsum</td>
                                        <td>Lorem ipsum</td>
                                    </tr>
                                    <tr>
                                        <td>Lorem ipsum</td>
                                        <td>Lorem ipsum</td>
                                        <td>Lorem ipsum</td>
                                        <td>Lorem ipsum</td>
                                    </tr>
                                    <tr>
                                        <td>Lorem ipsum</td>
                                        <td>Lorem ipsum</td>
                                        <td>Lorem ipsum</td>
                                        <td>Lorem ipsum</td>
                                    </tr>
                                    <tr>
                                        <td>Lorem ipsum</td>
                                        <td>Lorem ipsum</td>
                                        <td>Lorem ipsum</td>
                                        <td>Lorem ipsum</td>
                                    </tr>
                                </tbody>
                            </table>
                            <!-- ENDS table -->	

                        </div>
                        <!-- ENDS right -->

                    </div>
                    <!-- ENDS page-content -->


                </div>
                <!-- ENDS content -->

                <!-- twitter -->
                <div class="twitter-reader">
                    <script>Chirp({user:"ansimuz",max:1})</script></div>
            </div>
            <!-- ENDS twitter -->

        </div>
        <!-- ENDS main-wrapper -->


        </div>		
        <!-- ENDS MAIN -->	

        <!-- FOOTER -->
        <div id="footer">
            <div class="degree">
                <!-- wrapper -->
                <div class="wrapper">
                    <!-- social bar -->
                    <div id="social-bar">

                        <ul class="follow-us">
                            <li><span>FOLLOW US</span></li>
                            <li ><a href="#" class="icon-32 twitter-32 social-tooltip" title="Follow our tweets">link</a></li>
                            <li ><a href="#" class="icon-32 vimeo-32 social-tooltip" title="Lorem ipsum dolor">link</a></li>
                            <li ><a href="#" class="icon-32 dribbble-32 social-tooltip" title="Lorem ipsum dolor">link</a></li>
                            <li ><a href="#" class="icon-32 flickr-32 social-tooltip" title="Lorem ipsum dolor">link</a></li>
                            <li ><a href="#" class="icon-32 facebook-32 social-tooltip" title="Lorem ipsum dolor">link</a></li>

                        </ul>
                    </div>
                    <!-- ENDS social bar -->
                    <!-- footer-cols -->
                    <ul class="footer-cols">
                        <li class="col">
                            <h6>CATEGORIES</h6>
                            <ul>
                                <li><a href="#">WEBDESIGN</a></li>
                                <li><a href="#/">WORDPRESS</a></li>
                                <li><a href="#">PHOTO</a></li>
                                <li><a href="#">CODING</a></li>
                            </ul>
                        </li>
                        <li class="col">
                            <h6>PAGES</h6>
                            <ul>
                                <li><a href="#">HOW TO CUSTOMIZE THIS TEMPLATE</a></li>
                                <li><a href="#">5 ESSENTIALS RULES</a></li>
                                <li><a href="#">LOREM IPSUM DOLOR</a></li>
                            </ul>
                        </li>
                        <li class="col">
                            <h6>FREE TEMPLATES &amp; THEMES</h6>
                            <p>Get tons of free high quality templates at <a href="http://templatecreme.com">Template Creme</a>.</p>
                        </li>	
                        <li class="col">
                            <h6>PAGES</h6>
                            <ul>
                                <li><a href="#">HOW TO CUSTOMIZE THIS TEMPLATE</a></li>
                                <li><a href="#">5 ESSENTIALS RULES</a></li>
                                <li><a href="#">LOREM IPSUM DOLOR</a></li>
                            </ul>
                        </li>		
                    </ul>
                    <!-- ENDS footer-cols -->
                </div>
                <!-- ENDS footer-wrapper -->
            </div>
        </div>
        <!-- ENDS FOOTER -->


        <!-- BOTTOM -->
        <div id="bottom">
            <!-- wrapper -->
            <div class="wrapper">
                SIMPLE THEME by <a href="http://www.luiszuno.com" >luiszuno.com</a>
            </div>
            <!-- ENDS bottom-wrapper -->
        </div>
        <!-- ENDS BOTTOM -->

        <!-- start cufon -->
        <script type="text/javascript"> Cufon.now(); </script>
        <!-- ENDS start cufon -->

    </body>
</html>